import React, { Component } from 'react';
import { NavBar, IndexBar, List } from 'antd-mobile'
import "../styles/City.scss"
import * as service from "../api/index"

class City extends Component {
    constructor(props) {
        super(props);
        this.state = {
            city: [],
        };

    }
    async componentDidMount() {
        const res = await service.city_list()
        console.log(res.data);
        this.setState({ city: res.data })

    }

    tiao(name) {
        this.props.history.push({ pathname: '/index/home', state: { name } });//跳路由传参
        console.log(this.props.history.location.state.name)
    }
    render() {
        return (
            <div className='city'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>城市选择</p></NavBar>
                </div>
                <div className="xia" style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {this.state.city?.map((item, index) => {

                            return (
                                <IndexBar.Panel
                                    index={item.letter.toUpperCase()}
                                    title={`${(item.letter).toUpperCase()}`}
                                    key={`标题${item.letter}`}
                                >
                                    <List key={index} >
                                        {item.data.map((item, index) => (
                                            <List.Item key={index} onClick={() => { this.tiao(item.name) }}><p>{item.name}</p></List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>

            </div>
        );
    }
}

export default City;
